<template>
  <div class="update-or-edit">
    <el-card>
      <div slot="header">
        <el-steps
          :active="active"
          finish-status="success"
          simple
          style="margin-top: 20px"
        >
          <el-step @click.native="active = 1" title="基本信息"></el-step>
          <el-step @click.native="active = 2" title="课程封面"></el-step>
          <el-step @click.native="active = 3" title="销售信息"></el-step>
          <el-step @click.native="active = 4" title="秒杀信息"></el-step>
          <el-step @click.native="active = 5" title="课程详情"></el-step>
        </el-steps>
      </div>
      <el-form
        :model="courseForm"
        :rules="rules"
        ref="courseForm"
        label-width="100px"
        class="demo-courseForm"
      >
        <div v-show="active === 1">
          <el-form-item label="课程名称" prop="courseName">
            <el-input
              v-model="courseForm.courseName"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="课程简介" prop="brief">
            <el-input
              v-model="courseForm.brief"
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            class="simple-description"
            label="课程概述"
            prop="previewFirstField"
          >
            <el-input
              placeholder="概述1"
              maxlength="20"
              show-word-limit
              v-model="courseForm.previewFirstField"
            ></el-input>
            <el-input
              class="ml20"
              placeholder="概述2"
              maxlength="20"
              show-word-limit
              v-model="courseForm.previewSecondField"
            ></el-input>
          </el-form-item>
          <el-form-item label="讲师姓名" prop="teacherDTO.teacherName">
            <el-input
              maxlength="50"
              show-word-limit
              v-model="courseForm.teacherDTO.teacherName"
            ></el-input>
          </el-form-item>
          <el-form-item label="讲师职位" prop="teacherDTO.position">
            <el-input
              maxlength="50"
              show-word-limit
              v-model="courseForm.teacherDTO.position"
            ></el-input>
          </el-form-item>
          <el-form-item label="讲师简介" prop="teacherDTO.description">
            <el-input
              maxlength="100"
              show-word-limit
              v-model="courseForm.teacherDTO.description"
            ></el-input>
          </el-form-item>
          <el-form-item label="课程排序" prop="sortNum">
            <el-input-number
              v-model="courseForm.sortNum"
              controls-position="right"
            ></el-input-number>
            <!-- <el-input v-model="courseForm.sortNum">
                <template slot="append">数字控制排序，数字越大越靠后</template>
            </el-input> -->
          </el-form-item>
        </div>
        <div v-show="active === 2">
          <el-form-item label="课程封面">
            <course-img v-model="courseForm.courseImgUrl"></course-img>
          </el-form-item>
          <el-form-item label="解锁封面">
            <course-img v-model="courseForm.courseListImg"></course-img>
          </el-form-item>
        </div>
        <div v-show="active === 3">
          <el-form-item label="售卖价格" prop="discounts">
            <el-input type="number" v-model="courseForm.discounts">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="商品原价">
            <el-input type="number" v-model="courseForm.price">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="销量">
            <el-input type="number" v-model="courseForm.sales">
              <template slot="append">单</template>
            </el-input>
          </el-form-item>
          <el-form-item label="活动标签">
            <el-input
              maxlength="4"
              show-word-limit
              v-model="courseForm.discountsTag"
            >
            </el-input>
          </el-form-item>
        </div>
        <div v-show="active === 4">
          <el-form-item label="限时秒杀开关">
            <el-switch
              v-model="courseForm.activityCourse"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <div v-show="courseForm.activityCourse">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="courseForm.activityCourseDTO.beginTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="courseForm.activityCourseDTO.endTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="秒杀价">
              <el-input
                type="number"
                v-model="courseForm.activityCourseDTO.amount"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="秒杀库存">
              <el-input
                type="number"
                v-model="courseForm.activityCourseDTO.stock"
              >
                <template slot="append">个</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <div v-show="active === 5">
          <el-form-item>
            <text-editor
              v-model="courseForm.courseDescriptionMarkDown"
            ></text-editor>
          </el-form-item>
        </div>
        <div class="course-form__button">
          <el-form-item v-if="active === 5">
            <el-button @click="submitForm('courseForm')">保存</el-button>
          </el-form-item>
          <el-form-item v-else>
            <el-button @click="active += 1">下一步</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { saveOrUpdateCourse, getCourseById } from '@/service/course'
import courseImg from './course-img.vue'
import TextEditor from '@/components/text-editor'
export default {
  components: { courseImg, TextEditor },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    courseId: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      // 当前操作步骤
      active: 1,
      rules: {
        courseName: [
          { required: true, message: '请输入课程名称', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        brief: [
          { required: true, message: '请输入课程简介', trigger: 'blur' },
          {
            min: 3,
            max: 50,
            message: '长度在 3 到 100 个字符',
            trigger: 'blur'
          }
        ],
        'teacherDTO.teacherName': [
          { required: true, message: '请输入教师姓名', trigger: 'blur' }
        ],
        previewFirstField: [
          { required: true, message: '请输入课程概述', trigger: 'blur' }
        ],
        'teacherDTO.position': [
          { required: true, message: '请输入教师职位', trigger: 'blur' }
        ],
        'teacherDTO.description': [
          { required: true, message: '请输入教师简介', trigger: 'blur' }
        ],
        sortNum: [
          { required: true, message: '请输入课程排序', trigger: 'blur' }
        ],
        discounts: [
          { required: true, message: '请输入课程售价', trigger: 'blur' }
        ]
      },
      courseForm: {
        id: '',
        courseName: '',
        brief: '',
        teacherDTO: {
          id: '',
          courseId: 0,
          teacherName: '',
          teacherHeadPicUrl: '',
          position: '',
          description: ''
        },
        courseDescriptionMarkDown: '',
        price: 0,
        discounts: 0,
        priceTag: '',
        discountsTag: '',
        isNew: true,
        isNewDes: '',
        courseListImg: '',
        courseImgUrl: '',
        sortNum: 0,
        previewFirstField: '',
        previewSecondField: '',
        status: 0,
        sales: 0,
        activityCourse: true,
        activityCourseDTO: {
          id: '',
          courseId: '',
          beginTime: '',
          endTime: '',
          amount: 0,
          stock: 0
        },
        autoOnlineTime: ''
      }
    }
  },
  created () {
    this.courseId && this.loadCourse()
  },
  methods: {
    async loadCourse () {
      const { data } = await getCourseById({
        courseId: this.courseId
      })
      if (data.code === '000000') {
        data.data.activityCourseDTO = data.data.activityCourseDTO ?? {
          id: '',
          courseId: '',
          beginTime: '',
          endTime: '',
          amount: 0,
          stock: 0
        }
        this.courseForm = data.data
      }
    },
    async submitForm (formName) {
      try {
        const valid = await this.$refs[formName].validate()
        if (valid) {
          const { data } = await saveOrUpdateCourse(this.courseForm)
          if (data.code === '000000') {
            this.$message.success(this.isEdit ? '课程编辑成功' : '课程新增成功')
            this.$router.push({ name: 'course' })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ml20 {
  margin-left: 20px;
}
.el-form-item {
  text-align: left;
  &.simple-description {
    ::v-deep .el-form-item__content {
      display: flex;
    }
  }
}
.el-step {
  cursor: pointer;
}
</style>
